<template>
  <el-dialog v-if="visible" :title="tagData.form.expandparamId ? '修改属性' : '新增属性'" v-model="visible" width="35%"
             :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
    <el-form class="tagForm" ref="tagFormRef" :model="tagData.form" :status-icon="true" :show-message="false"
             :style="{ height: height + 'px' }">
      <el-form-item label="属性类型" prop="expandparamName" required>
        <el-input class="tag_input" v-model="tagData.form.expandparamName" placeholder="请输入属性类型"
                  autocomplete="off" clearable></el-input>
      </el-form-item>

      <el-form-item label="属性信息" required>
        <div class="tags-box">
          <template v-for="(item, index) in tagData.form.categoryExpandparamValueList" :key="index">
            <div class="tags">
              <el-input class="tag_input" v-model="item.expandparamValueName" placeholder="请输入属性信息" clearable />
              <Button label="-" size="small" @click="() => onDelClick(item, index)" />
            </div>
          </template>
          <Button class="add_btn" label="+" size="small" @click="onAddClick()" />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <Button label="取消" @click="onCancelClick" />
      <Button type="primary" label="确认" @click="onSubmitClick" />
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, computed, watch, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import Button from '@/components/button/button.vue'

const emit = defineEmits(['update:visible', 'change'])
const props = defineProps(['visible', 'form'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

watch(
  () => props.form,
  (val) => {
    if (val) {
      tagData.form = {
        ...val,
        categoryExpandparamValueList: val.categoryExpandparamValueList.map((e) => ({ ...e }))
      }
    } else {
      tagData.form = { categoryExpandparamValueList: [] }
    }
  }
)

const tagFormRef = ref(null)
const height = ref(300)

const tagData = reactive({
  form: {}
})

const delExpandparamValue = async (item, index) => {
  let { err } = await api.post(`/medinstrument/boss/expandparam/delExpandparamValue?expandparamId=${item.expandparamId} &expandparamValueId=${item.expandparamValueId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    tagData.form.categoryExpandparamValueList.splice(index, 1)
  }
}

const onAddClick = () => {
  let expand = {
    expandparamId: tagData.form.expandparamId,
    expandparamValueName: ''
  }
  tagData.form.categoryExpandparamValueList.push(expand)

  nextTick(() => {
    setTimeout(() => {
      tagFormRef.value.$el.scrollTop = tagFormRef.value.$el.scrollHeight
    }, 10)
  })
}

const onDelClick = (item, index) => {
  if (item.expandparamValueId) {
    ElMessageBox.confirm('是否确认删除当前属性信息?', '删除属性信息', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: false
    })
      .then(() => {
        delExpandparamValue(item, index)
      })
      .catch(() => {
      })
  } else {
    tagData.form.categoryExpandparamValueList.splice(index, 1)
  }
}

const hide = () => {
  visible.value = false
  tagFormRef.value.clearValidate()
  tagFormRef.value.resetFields()
}

const onCancelClick = () => {
  tagData.form = {}
  tagData.form.categoryExpandparamValueList = []
  hide()
}

const onSubmitClick = () => {

  tagFormRef.value.validate((valid,fields) => {
    if (valid) {
      const newListLength = new Set(tagData.form.categoryExpandparamValueList.map(item =>
        item.expandparamValueName)).size;
      const listLength = tagData.form.categoryExpandparamValueList.length;
      if (listLength > newListLength) {
        ElMessage.error('属性信息不能重复');
        return;
      }
      emit('change', tagData.form)
      hide()
      tagData.form = {}
      tagData.form.categoryExpandparamValueList = []
    }
  })
}
</script>
<style scoped lang="scss">
.tagForm {
  padding: 0 15px;
  overflow-y: auto;
  scroll-behavior: smooth;

  .tags-box {
    height: auto;

    .tags {
      .tag_input {
        margin-bottom: 10px;
      }
    }

    .add_btn {
    }
  }
}

.tag_input {
  width: 300px;
  margin-right: 10px;
}
</style>
